<template>
  <div>
    <img v-for="(item, index) in urlData" :key="index" :src="item" style="width: 30%" @click="showImg(index)">
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      urlData: [
        'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d56b83ec95c4eab99e7d3e5653da25c~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?',
        'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/461ecbbaa9444f28b4749a12272df36d~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?',
        'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0342793e1284db88673d7ba54fe1536~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?'
      ]
    };
  },
  created() {
    function isBigEnough(element, index, array) {
      return element >= 5;
    }
    const result1 = [2, 5, 8, 1, 4].some(isBigEnough);
    const result2 = [2, 5, 8, 1, 4].every(isBigEnough);
    console.log('some:', result1);
    console.log('every:', result2);
  },
  methods: {
    showImg(index) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: index,
        imgList: this.urlData
      });
    }
  }
};
</script>
<style lang="less" scoped>
img {
  width: 100%;
}
</style>
